<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">每日晨检</small>
      </a>
      <router-link to='/mrcjlistadd' class="adds">
        <i class="el-icon-plus"></i>
      </router-link>
    </header>
    <main>
      <div class="seachfrom">
        <div class="seachbox">
          <el-input placeholder="请输入内容" v-model="seachtext">
            <el-button slot="append" icon="search" @click="seach()"></el-button>
          </el-input>
        </div>
      </div>
      <div>
        <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
          <ul class="datalist">
            <li v-for="item in listData" :key='item.unid'>

              <router-link :to='{name: "Mrcjlistdetail",query:{unid: item.unid}}'>
                <div class="items-img">
                  <img src="" />
                </div>
                <div class="items-text">
                  <p>名称:{{item.enterprisePerson.name}}</p>
                  <p>健康证号：{{item.healthCode}}</p>
                  <p>晨检结果：{{item.morningRecordContent}}</p>
                  <p>日期：{{item.morningRecordDate}}</p>
                </div>
              </router-link>
            </li>
          </ul>
        </v-loadmore>
        <!--
          <ul class="datalist">
      
            <li v-for='item of listData' :key='item.unid'>
             <router-link :to='{name: "Mrcjlistdetail",query:{unid: item.unid}}'>
              <div class="items-img">
                <img src="" />
              </div>
              <div class="items-text">
                <p>名称:{{item.enterprisePerson.name}}</p>
                <p>健康证号：{{item.healthCode}}</p>
                <p>晨检结果：{{item.morningRecordContent}}</p>
                <p>日期：{{item.morningRecordDate}}</p>
              </div> 
             </router-link>
            
            </li>
          </ul>-->
      </div>
    </main>
  </div>
</template>

<script>
import { Loadmore } from 'mint-ui';
import { MorningRecord } from '../../api/api';
export default {
  components: {
    'v-loadmore': Loadmore,
  },
  data() {
    return {
      PageSize: 5,
      CurrentPage: 1,
      CriteriaList: [],
      listData: [],
      seachtext: '',
      select: '',
      allLoaded: false,
      scrollMode: "auto"
    };
  },
  methods: {

    loadTop: function() { //组件提供的下拉触发方法  
      //下拉刷新
      if (this.CurrentPage <= 0) {
        this.CurrentPage = 1;
      } else {
        this.listData = [];
        this.getData();
      }
      this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位  
    },
    loadBottom: function() {
      // 上拉加载  
      this.CurrentPage += 1;
      this.getData();
      // 上拉触发的分页查询  

      //this.allLoaded = true;
      this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位  
    },
     //搜索
    seach: function () {
      this.listData =[];
      this.CriteriaList[0] ={
        Name : 'EnterprisePerson.Name',
        Value: '%'+this.seachtext+'%',
        Operate:'Like',
        DataType: null,
        EndSuffix: '',
        Suffix:null
      };
      
      this.getData();
    },

   
    //数据加载方法
    getData() {
      //定义需要传给通讯的参数：QueryData{"PageSize":10,"CurrentPage":1,"Query":{"CriteriaList":[]}}和userunid    
      let varQueryData = {
        PageSize: this.PageSize,
        CurrentPage: this.CurrentPage,
        Query: {
          CriteriaList: this.CriteriaList
        }
      }
      let options = {
        params: {
          UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
          QueryData: JSON.stringify(varQueryData)
        }
      }
      //调取接口
      MorningRecord(options).then((res) => {
        if (res.success === true) {
          this.user = res.data.user;
          this.listData = this.listData.concat(res.data);
        }
      })
    }
  },

  //页面加载时候
  mounted() {
    this.getData();
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
//头部
body {
  background: #f0f0f0;
}

a {
  list-style: none;
  text-decoration: none;
}

header {
  width: 100%;
  height: 45px;
}

.head {
  background: #008c3f;
  color: #fff;
  line-height: 45px;
  text-align: center;
  font-size: 1.2rem;
  position: relative;
}

header .head a:nth-child(2) {
  width: 100%;
}

.font_18 {
  font-size: 18px;
}

.co_f {
  color: #fff !important;
}

.back {
  position: absolute;
  top: 0px;
  left: 0px;
  i {
    color: #fff;
    vertical-align: middle;
    margin-left: 5px;
  }
}

.adds {
  position: absolute;
  top: 0px;
  right: 0px;
  i {
    color: #fff;
    vertical-align: middle;
    margin-right: 5px;
  }
} //seachfrom
.seachfrom {
  background: #f5f5f5;
  padding: 10px 15px;
} //list_box
.datalist {
  width: 100%;
}

.datalist li {
  border-bottom: 1px solid #d4d4d4;
  padding: 10px;
}

.items-img {
  width: 50px;
  height: 50px;
  display: block;
  display: inline-block;
  float: left;
  margin-top: 7px;
}

.items-img img {
  width: 100%;
  height: 100%;
}

.items-text {
  margin-left: 60px;
  font-size: 12px;
}

.items-text p {
  margin: 0px;
}
</style>
